<template>
  <div
    style="position: absolute;top: 0;right: 0;bottom: 0;left: 0"
  >
    <!--rcu tunnel table-->
    <el-table
      height="100%"
      class="table-gutter-background"
      header-row-class-name="test-table-row-class"
      header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
      cell-class-name="my-table-cell"
      :data="tunnelList"
    >
      <!--空数据时slot-->
      <div slot="empty">
        <div class="line-height-base">
          暂无RCU的信息
        </div>
      </div>
      <!--通道编号-->
      <el-table-column
        :label="$t('message.home.rcuTunnelTable.id')"
        sortable
        prop="name"
        min-width="155px"
      />
      <!--状态名称-->
      <el-table-column
        min-width="150px"
        :label="$t('message.home.rcuTunnelTable.statename')"
        prop="statename"
        :filters="[{ text: $t('message.define.rcuTunnel.state.0'), value: $t('message.define.rcuTunnel.state.0') }, { text: $t('message.define.rcuTunnel.state.1'), value: $t('message.define.rcuTunnel.state.1') }]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <font-awesome-icon
            :style="{color: scope.row.color}"
            icon="circle"
          />
          <span style="margin-left: 5px">
            {{ scope.row.statename }}
          </span>
        </template>
      </el-table-column>
      <!--类型-->
      <el-table-column
        :label="$t('message.home.rcuTunnelTable.typeName')"
        prop="typeName"
        min-width="130px"
      />
      <!--通信速率-->
      <el-table-column
        :label="$t('message.home.rcuTunnelTable.speed')"
        prop="speed"
        min-width="130px"
      />
      <!--工作频点（下行）-->
      <el-table-column
        :label="$t('message.home.rcuTunnelTable.frequency')"
        prop="frequencyFormat"
        min-width="160px"
      />
      <!--实时流量-->
      <el-table-column
        :label="$t('message.home.rcuTunnelTable.flow')"
        prop="flow"
        min-width="130px"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Rcu',

  data () {
    return {
    }
  },

  computed: {
    tunnelList () {
      return this.$store.getters.rcuTunnelList.map(tunnelItem => {
        let state = tunnelItem.frequency === 0 ? 0 : 1
        return {
          ...tunnelItem,
          statename: this.$t(`message.define.rcuTunnel.state.${state}`),
          color: this.$t(`message.define.rcuTunnel.stateColor.${state}`),
          typeName: this.$t(`message.define.controlChannel.kind.${tunnelItem.type}`),
          frequencyFormat: this.$service.miliFormat(tunnelItem.frequency / 1000)
        }
      })
    }
  },

  methods: {
    // table的标签过滤方法
    filterTag (value, row) {
      return row.statename === value
    }
  }
}
</script>

<style scoped>
</style>
